<template>
	<Layout style="padding:0 24px 24px;height:100%;">
		<Breadcrumb style="margin:24px 0">
			<BreadcrumbItem>首页</BreadcrumbItem>
			<BreadcrumbItem>测试页面</BreadcrumbItem>
		</Breadcrumb>
		<Form inline>
			<ButtonGroup style="margin-right:24px;"><Button title="新增" icon="md-add" @click="editModal = true"></Button></ButtonGroup>
			<FormItem><Input type="text" placeholder="请输入规则名称" clearable v-model="pageRequest.condition.ruleName" /></FormItem>
			<FormItem><Button type="primary" icon="ios-search" shape="circle" title="查询" @click="list"></Button></FormItem>
		</Form>
		<Content ref="content" style="padding:0px;background:#fff;height:100%">
			<Table :loading="loading" :columns="tableColumns" :data="pageData.content" :height="tableHeight" @on-selection-change="onSelectionChange">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="warning" size="small" style="margin-right: 5px" @click="modify(row)">修改</Button>
					<Button type="primary" size="small" style="margin-right: 5px" @click="loadRule(row)">应用规则</Button>
					<Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
				</template>
				<template slot="footer">
					<Page style="margin-left:10px;" :total="pageData.total" :current="pageData.page" :page-size="15" @on-change="changePage"></Page>
				</template>
			</Table>
		</Content>
		<!-- 编辑对话框 -->
		<Modal :width="600" v-model="editModal" @on-visible-change="onVisibleChange" title="编辑规则" fullscreen footer-hide>
			<Form ref="form" :model="info" :label-width="100" :rules="rules">
				<FormItem label="规则名称" prop="ruleName"><Input v-model="info.ruleName" type="text" placeholder="请输入规则名称" /></FormItem>
				<FormItem label="DRL规则" prop="ruleContent">
					<Input :rows="20" @keydown.tab.native="tabEvent" v-model="info.ruleContent" type="textarea" placeholder="drools .drl规则文件内容" />
				</FormItem>
				<FormItem><Button type="primary" @click="save">保存</Button></FormItem>
			</Form>
		</Modal>
	</Layout>
</template>

<script language="JavaScript">
export default {
	components: {},
	data() {
		return {
			tableHeight: 100, // 自适应表格高度
			loading: false, // 加载中
			tableColumns: [
				{
					type: 'selection',
					width: 80
				},
				{
					title: '规则编号',
					key: 'ruleCode',
					width: 150
				},
				{
					title: '规则名称',
					key: 'ruleName'
				},
				{
					title: '版本号',
					key: 'version',
					width: 150
				},
				{
					title: '更新时间',
					key: 'updateTime',
					width: 300
				},
				{
					title: '操作',
					slot: 'action',
					width: 300
				}
			], // 表格列
			// 分页请求
			pageRequest: {
				page: 1,
				rows: 15,
				sort: 'id:asc',
				condition: {}
			},
			// 分页查询结果
			pageData: {
				page: 1,
				total: 2,
				content: [] // 表格数据
			},
			editModal: false, // 编辑对话框显示
			info: {
				id: '',
				ruleCode: '',
				ruleName: '',
				ruleContent: ''
			}, // 保存信息
			rules: {
				ruleName: [
					{
						required: true,
						message: '必填'
					}
				],
				ruleContent: [
					{
						required: true,
						message: '必填'
					}
				]
			}, // 验证规则
			selection: [], //已选记录
			uploadHeaders: {} // 上传文件头位
		};
	},
	computed: {},
	watch: {},
	created: function() {},
	mounted: function() {
		let token = localStorage.getItem(this.$config.tokenName);
		this.uploadHeaders['Authorization'] = `bearer ${token}`;
		this.uploadHeaders['x-requested-with'] = 'XMLHttpRequest';
		this.$nextTick(() => {
			this.tableHeight = this.$refs.content.$el.clientHeight;
			this.list();
		});
	},
	methods: {
		// 保存
		save: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.$request.post(
						'/admin/sys/drools/drl/save',
						this.info,
						res => {
							this.editModal = false;
							this.list();
						},
						true,
						true
					);
				}
			});
		},
		// 获取列表
		list: function() {
			this.$request.post(
				'/admin/sys/drools/drl/list',
				this.pageRequest,
				res => {
					this.pageData = res.data || this.pageData;
				},
				false,
				false
			);
		},
		// 修改
		modify: function(row) {
			this.editModal = true;
			this.$nextTick(() => {
				this.info = Object.assign({}, row);
			});
		},
		// 删除
		remove: function(row) {
			this.$Modal.confirm({
				title: '确认？',
				content: '删除后不可恢复，是否继续？',
				onOk: () => {
					this.$request.post(
						'/admin/sys/drools/drl/delete',
						row,
						res => {
							this.list();
						},
						true,
						true
					);
					this.selection = [];
				}
			});
		},
		// 关闭对话框
		onVisibleChange: function() {
			this.$refs['form'].resetFields();
			this.info.id = '';
		},
		// 表格多选事件
		onSelectionChange: function(sel) {
			this.selection = sel;
		},
		// 分页
		changePage: function(page) {
			this.pageRequest.page = page;
			this.list();
		},
		// 上传成功钩子
		onSuccess: function(res, file, list) {
			if (res.status == 'success') {
				this.$Message.success('上传成功');
			} else {
				this.$Notice.error({
					title: '错误',
					desc: res.message
				});
				this.$refs['upload'].clearFiles();
			}
		},
		// 应用规则
		loadRule: function(row) {
			this.$Modal.confirm({
				title: '确认？',
				content: '应用后将使用该规则进行处理，是否继续？',
				onOk: () => {
					this.$request.post(
						'/admin/sys/drools/drl/apply',
						row,
						res => {
							this.list();
						},
						true,
						true
					);
					this.selection = [];
				}
			});
		},
		// tab事件
		tabEvent: function(e) {
			e.preventDefault();
			let indent = '    ';
			var start = e.target.selectionStart;
			var end = e.target.selectionEnd;
			var selected = window.getSelection().toString();
			selected = indent + selected.replace(/\n/g, '\n' + indent);
			e.target.value = e.target.value.substring(0, start) + selected + e.target.value.substring(end);
			e.target.setSelectionRange(start + indent.length, start + selected.length);
		}
	}
};
</script>

<style lang="scss" scoped="scoped"></style>
